<template>
  <div class="tab flex-box">
    <div class="item" @click="tabChange(item.value)" :class="{'active':item.value === active}" v-for="item in tabs">{{item.name}}</div>
  </div>
</template>
<script>
  export default {
    name:'TimeTab',
    props:{
      active:{
        type:String,
        default:'year'
      }
    },
    data(){
      return{
        tabs:[
          {
            name:'年',
            value:'year'
          },{
            name:'月',
            value:'month'
          }
        ],
      }
    },
    methods:{
      tabChange(val){
        this.$emit('update:active',val)
      },
    }
  }
</script>
<style lang="scss" scoped>
  .tab{
    width: 100%;
    position: relative;

  &:after{
     position: absolute;
     bottom: 2px;
     width: 100%;
     content: '';
     height: 1px;
     background: rgba(157, 183, 221,.4);
     z-index: 0;
   }
  .item{
    width: 50%;
    text-align: center;
    font-family: title-font;
    font-size: 38px;
    height:54px ;
    line-height: 54px;
    cursor: pointer;
    color: rgba(142, 187, 254, 0.21);
  &.active{
     background: url("../assets/imgs/tab_active.png")no-repeat;
     background-position: 50% 17px;
     z-index: 1;
    color: #8EBBFE;
   }
  }
  }
</style>
